<!DOCTYPE html
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>百度地图API自定义地图</title>
    <!--引用百度地图API-->
    <style type="text/css">
        html,
        body {
            margin: 0;
            padding: 0;
        }

        .iw_poi_title {
            color: #CC5522;
            font-size: 14px;
            font-weight: bold;
            overflow: hidden;
            padding-right: 13px;
            white-space: nowrap
        }

        .iw_poi_content {
            font: 12px arial, sans-serif;
            overflow: visible;
            padding-top: 4px;
            white-space: -moz-pre-wrap;
            word-wrap: break-word
        }
    </style>

    <script type="text/javascript">
        window.BMap_loadScriptTime = (new Date).getTime();
    </script>
    <script type="text/javascript" src="baidu.js"></script>
    <link rel="stylesheet" type="text/css" href="baidu.css" />

</head>

<body>
    <!--百度地图容器-->
    <div style="width:420px;height:350px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap() {
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addPolyline();//向地图中添加线
        addRemark();//向地图中添加文字标注
    }

    //创建地图函数：
    function createMap() {
        var map = new BMap.Map("dituContent");//在百度地图容器中创建一个地图
        var point = new BMap.Point(104.077643, 30.55542);//定义一个中心点坐标
        map.centerAndZoom(point, 17);//设定地图的中心点和坐标并将地图显示在地图容器中
        window.map = map;//将map变量存储在全局
    }

    //地图事件设置函数：
    function setMapEvent() {
        map.enableDragging();//启用地图拖拽事件，默认启用(可不写)
        map.enableScrollWheelZoom();//启用地图滚轮放大缩小
        map.enableDoubleClickZoom();//启用鼠标双击放大，默认启用(可不写)
        map.enableKeyboard();//启用键盘上下左右键移动地图
    }

    //地图控件添加函数：
    function addMapControl() {
        //向地图中添加缩放控件
        var ctrl_nav = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_TOP_LEFT, type: BMAP_NAVIGATION_CONTROL_LARGE });
        map.addControl(ctrl_nav);
        //向地图中添加缩略图控件
        var ctrl_ove = new BMap.OverviewMapControl({ anchor: BMAP_ANCHOR_BOTTOM_RIGHT, isOpen: 1 });
        map.addControl(ctrl_ove);
        //向地图中添加比例尺控件
        var ctrl_sca = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });
        map.addControl(ctrl_sca);
    }

    //标注线数组
    var plPoints = [{ style: "solid", weight: 4, color: "#f00", opacity: 0.6, points: ["104.077733|30.555436", "104.077787|30.555373", "104.077841|30.555451", "104.077841|30.555467"] }
    ];
    //向地图中添加线函数
    function addPolyline() {
        for (var i = 0; i < plPoints.length; i++) {
            var json = plPoints[i];
            var points = [];
            for (var j = 0; j < json.points.length; j++) {
                var p1 = json.points[j].split("|")[0];
                var p2 = json.points[j].split("|")[1];
                points.push(new BMap.Point(p1, p2));
            }
            var line = new BMap.Polyline(points, { strokeStyle: json.style, strokeWeight: json.weight, strokeColor: json.color, strokeOpacity: json.opacity });
            map.addOverlay(line);
        }
    }
    //文字标注数组
    var lbPoints = [{ point: "104.077374|30.555731", content: "Hi!&nbsp;Have&nbsp;a&nbsp;nice&nbsp;day!" }
    ];
    //向地图中添加文字标注函数
    function addRemark() {
        for (var i = 0; i < lbPoints.length; i++) {
            var json = lbPoints[i];
            var p1 = json.point.split("|")[0];
            var p2 = json.point.split("|")[1];
            var label = new BMap.Label("<div style='padding:2px;'>" + json.content + "</div>", { point: new BMap.Point(p1, p2), offset: new BMap.Size(3, -6) });
            map.addOverlay(label);
            label.setStyle({ borderColor: "#999" });
        }
    }

    initMap();//创建和初始化地图
</script>

</html>